<template>
  <a-row :gutter="[10, 10]">
    <!-- 当前运行策略 -->
    <a-col :span="24">
      <a-card title="当前运行策略">
        <p>当前运行策略: 综合优化策略</p>
        <p>
          当前策略执行起止时间:
          <a-range-picker v-model:value="timeRange" @change="onDateChange" format="YYYY-MM-DD HH:mm:ss" show-time />
        </p>
      </a-card>
    </a-col>

    <!-- 实时能流图 -->
    <a-col :span="24">
      <a-card title="实时能流图" bordered>
        <div id="energyFlowChart" style="width: 100%; height: 400px"></div>
      </a-card>
    </a-col>

    <!-- 实时能流数据表 -->
    <a-col :span="24">
      <a-card title="实时能流数据表" bordered>
        <a-table :columns="columns" :dataSource="energyData" rowKey="key" bordered />
      </a-card>
    </a-col>

    <!-- 操作按钮区域 -->
    <a-col :span="24">
      <a-card bordered>
        <a-row gutter="10" justify="end">
          <a-button type="primary" @click="executeNewStrategy" class="custom-button">执行新策略</a-button>
          <a-button type="default" @click="viewPlan" class="custom-button">查看计划</a-button>
        </a-row>
      </a-card>
    </a-col>
  </a-row>
</template>

<script setup>
  import { ref, onMounted, reactive } from 'vue';
  import * as echarts from 'echarts';

  // 起止时间的范围
  const timeRange = ref([]);

  // 日期变化处理函数
  const onDateChange = (dates) => {
    console.log('选择的时间范围:', dates);
  };

  // 实时能流数据表数据
  const energyData = reactive([
    { key: '1', name: '光伏系统', value: '500 kWh', status: '运行中' },
    { key: '2', name: '电网', value: '1000 kWh', status: '正常' },
    { key: '3', name: '逆变器', value: '运行', status: '正常' },
    { key: '4', name: '主变压器计量节点', value: '正常', status: '运行中' },
    { key: '5', name: '负载供电优先', value: '优先', status: '正常' },
    { key: '6', name: '储能电池充电', value: '充电中', status: '正常' },
    { key: '7', name: '储能电池放电优先', value: '放电中', status: '正常' },
    { key: '8', name: '工业负荷', value: '250 kWh', status: '正常' },
    { key: '9', name: '办公负荷', value: '475 kWh', status: '正常' },
  ]);

  // 表格列定义
  const columns = [
    { title: '名称', dataIndex: 'name', key: 'name' },
    { title: '能量 (kWh)', dataIndex: 'value', key: 'value' },
    { title: '状态', dataIndex: 'status', key: 'status' },
  ];

  // 初始化实时能流图
  const initEnergyFlowChart = () => {
    const chartDom = document.getElementById('energyFlowChart');
    const chartInstance = echarts.init(chartDom);
    const option = {
      tooltip: {
        trigger: 'item',
      },
      series: [
        {
          type: 'sankey',
          data: [
            { name: '光伏系统 (500 kWh)' },
            { name: '电网 (1000 kWh)' },
            { name: '逆变器' },
            { name: '主变压器计量节点' },
            { name: '负载供电优先' },
            { name: '储能电池充电' },
            { name: '储能电池放电优先' },
            { name: '工业负荷 (250 kWh)' },
            { name: '办公负荷 (475 kWh)' },
          ],
          layoutIterations: 0,
          links: [
            { source: '光伏系统 (500 kWh)', target: '逆变器', value: 500 },
            { source: '电网 (1000 kWh)', target: '主变压器计量节点', value: 1000 },
            { source: '逆变器', target: '负载供电优先', value: 500 },
            { source: '负载供电优先', target: '工业负荷 (250 kWh)', value: 250 },
            { source: '负载供电优先', target: '办公负荷 (475 kWh)', value: 475 },
            { source: '储能电池充电', target: '储能电池放电优先', value: 300 },
          ],
          lineStyle: {
            color: 'source',
            curveness: 0.5,
          },
          label: {
            color: 'rgba(0, 0, 0, 1)',
          },
        },
      ],
    };
    chartInstance.setOption(option);
  };

  // 在组件挂载时初始化实时能流图
  onMounted(() => {
    initEnergyFlowChart();
  });

  // 操作按钮功能
  const executeNewStrategy = () => {
    console.log('执行新策略');
  };

  const viewPlan = () => {
    console.log('查看计划');
  };
</script>

<style scoped>
  /* 自定义样式 */
  #energyFlowChart {
    margin-top: 20px;
  }

  .custom-button {
    margin: 0 10px;
  }
</style>
